
    <!DOCTYPE html>
    <html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            .box {
                /* width: 100px; */
                /* height: 100px; */
                /* background: red; */
                position: absolute;
                left: 0px;
            }
        </style>
    </head>

    <body>
        <div class="content">我是内容</div>
        <div class="box" style="width: 100px;height: 100px;background: red;">div1</div>
        <ul>


        </ul>
        
        <script>
        // 一、style ： 1.设置元素的样式 ，设置在行间
        // 2.获取样式 ：注意只能获取行间样式
        // var box = document.querySelector(".box");
        // var num  = 0;
        // box.onclick = function(){
        //     // console.log(this);
        //     // box.style.color = "red";
        //     // this.style.color = "blue";
        //     // this.style.backgroundColor = "red";
        //     // console.log(this.style.width);
        //     var that = this;
        // var timer =  setInterval(function(){
        //         num += 5;
        //         that.style.left =  num + "px";
        //         if(num==300){
        //             clearInterval(timer);
        //             // 获取方块当前的位置 
        //             var nowLeft = parseInt( that.style.left);
        //             // console.log(nowLeft);
        //          var timer2 =  setInterval(function(){
        //                 nowLeft-=5;
        //                 that.style.left =  nowLeft + "px";
        //             if(nowLeft==0){
        //                 clearInterval(timer2);
        //             }
        //             },10)
        //         }
        //     },10)
        // }


        // 二、innerHTML 可以填充元素的html 超文本
        // 三、innerText 可以填充元素的文本 
        // 1.设置元素里的超文本 2.获取元素里的超文本
        var ele = document.querySelector(".content");

        document.onclick = function(){
            // 设置超文本
            // ele.innerHTML = "<h1>我是标题</h1>";
            // ele.innerText = "<h1>我是标题</h1>";
            // console.log(ele.innerHTML);
            console.log(ele.innerText);
        }

        // 思考 
        var arr = [{name:"张三",age:21},{name:"李四",age:20},{name:"王五",age:26}]
        // 点击按钮之后 放在 ul 和li里显示出来 姓名和年龄

        /* 
            <ul>
                <li>姓名是张三年龄是21</li>   
                <li>姓名是李四年龄是20</li> 
                <li>姓名是王五年龄是26</li>  
            </ul>
        */



        </script>
    </body>

    </html>
